<template>
  <h1>App</h1>
  <ul>
    <li>
      <button @click="$router.push({ name: 'home' })">Home</button>
    </li>
    <li>
      <button @click="router.push({ name: 'home', query: { name: 'jack', age: 20 } })">Home</button>
    </li>
    <li>
      <RouterLink to="/home?name=lili&age=21">Home?name=lili&age=21</RouterLink>
    </li>
    <li>
      <button @click="router.push({ name: 'shop', params: { id: 100 } })">shop/100</button>
    </li>
    <li>
      <RouterLink to="/shop/200">Shop/200</RouterLink>
    </li>
    <li>
      <RouterLink to="/ha/ha">NotFound</RouterLink>

    </li>
  </ul>
  <RouterView></RouterView>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
</script>

<style>
div {
  border: solid;
  padding: 10px;
}
</style>